<template>
	<view>
		<!--商品-->
		<checkbox-group @change="checkPro">
		<view class="product" v-for="(item,index) in shoppingcar" :key="item.id">
			<view class="checkBox">
					<checkbox color="rgb(148,102,102)" @click="xiabiao(index)" :value="index+''" :checked="checks[index]"></checkbox>
			</view>
			<view class="left" @click="toDetail(index)">
				<view>
					<image :src="imgs[index]"></image>
				</view>
			</view>
			<view class="right">
				<view class="proname">
					<text>{{item.product.proName}}</text>
				</view>
				<view class="proprice">
					<text>价格 :{{item.product.price}}</text>
				</view>
				<view class="pronumber" >
					<view class="jiahao"  @click="jianhao(index)">
						<text class="icon">&#xe607;</text>
					</view>
						<input type="number" disabled="true"  class="number" v-model="item.number" />
					<view class="jianhao" @click="jiahao(index)">
						<text class="icon">&#xe608;</text>
					</view>
					<view class="shanchu">
						<text class="icon" @click="shanchu(index)">&#xe69c;</text>
					</view>
				</view>
			</view>
		</view>
		</checkbox-group>
		<view class="liubai"></view>
		<!--结算-->
		<view class="jiesuan">
			<view class="allChoose" >
				<checkbox-group>
					<checkbox color="rgb(148,102,102)" @click="quanxuan" :checked="checkAll" >全选</checkbox>
				</checkbox-group>
			</view>
			<view class="heji">
				<text>合计: ¥ {{total}}</text>
			</view>
			<view class="bai">	</view>
			<view class="zhifu" @click="toShoppingCarPay">
				<text>结算</text>
			</view>
		</view>
		
		<!--暂无商品,欢迎选购-->
		<view class="zanwupingjia" v-if="this.shoppingcar.length==0">
			<text>暂无商品,欢迎选购</text>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/liucomponents/uni-number-box/uni-number-box.vue"
	export default {
		 components: {
			 uniNumberBox
		},
		data() {
			return {
				shoppingcar:[],
				imgs:[],
				//商品选中与否的状态集合
				checks:[],
				//全选的状态
				checkAll:false,
				//当前选中的下标数组
				value:[],
				total:0,
				//用户信息
				user:{
					
				}
			}
		},
		onLoad() {
			//获取用户信息
			// uni.getStorage({
			// 	key:"user",
			// 	success: (res) => {
			// 		this.user=res.data;
			// 	}
			// })
			//同步获取缓存
			const value=uni.getStorageSync("user");
			this.user=value;
			
			uni.request({
				url:this.webUrl+"selectShoppingCar",
				data:{
					'userId':this.user.userId
				},
				success: (res) => {
					this.shoppingcar=res.data.list;
					for(var i=0;i<this.shoppingcar.length;i++){
						this.imgs.push(this.shoppingcar[i].product.img[0].url);
						this.checks.push(false);
					}
				}
			})
		},
		//因为是tabbr页面缓冲一直在,onshow以防先打开了购物车,然后再去集市添加了其他商品后回来,用onshow再次刷新出添加的商品
		// onShow() {
		// 	//清楚imgs的缓存
		// 	this.imgs=[];
		// 	this.getShoppingCar();
		// },
		//使用下拉刷新代替以上注释部分
		onPullDownRefresh(){
			this.shoppingcar=[];
			this.checks=[];
			this.imgs=[];
			this.checkAll=false;
			this.value=[];
			this.total=0;
			uni.request({
				url:this.webUrl+"selectShoppingCar",
				data:{
					'userId':this.user.userId
				},
				success: (res) => {
					this.shoppingcar=res.data.list;
					for(var i=0;i<this.shoppingcar.length;i++){
						this.imgs.push(this.shoppingcar[i].product.img[0].url);
						this.checks.push(false);
					}
				}
			})
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 800);
		},
		methods: {
			//查询购物车信息的方法
			getShoppingCar(){
				uni.request({
					url:this.webUrl+"selectShoppingCar",
					data:{
						'userId':this.user.userId
					},
					success: (res) => {
						this.shoppingcar=res.data.list;
						for(var i=0;i<this.shoppingcar.length;i++){
							this.imgs.push(this.shoppingcar[i].product.img[0].url);
						}
					}
				})
			},
			//更新数据库
			updateShoppingCarKu(index){
				uni.request({
					url:this.webUrl+"updateShoppingCar",
					data:{
						'id':this.shoppingcar[index].id,
						'userId':this.shoppingcar[index].userId,
						'proId':this.shoppingcar[index].proId,
						'number':this.shoppingcar[index].number
					}
				})
			},
			//加数量
			jiahao(index){
				if(this.shoppingcar[index].number<this.shoppingcar[index].product.stock){
					this.shoppingcar[index].number=this.shoppingcar[index].number+1;
					//跟新数据库
						this.updateShoppingCarKu(index);
				}
				this.getTotal();
			},
			//减数量
			jianhao(index){
				if(this.shoppingcar[index].number>1){
					this.shoppingcar[index].number=this.shoppingcar[index].number-1;
					this.updateShoppingCarKu(index);
				}
				this.getTotal();
			},
			//单选的方法
			xiabiao(index){
				var list=this.value;
				if(this.value.length!=0){
					if(this.checks[index]==false){
						for(var i=0;i<list.length;i++){
							this.checks[parseInt(list[i])]=true;
						}
					}else{
						for(var i=0;i<list.length;i++){
							this.checks[parseInt(list[i])]=true;
						}
						this.checks[index]=false;
					}
				}else{
					this.checks[index]=false;
				}
				var num=0;
				for(var i=0;i<this.checks.length;i++){
					if(this.checks[i]==false){
						break;
					}else{
						num++;
					}
				}
				if(num==this.checks.length){
					this.checkAll=true;
				}else{
					this.checkAll=false;
				}
				this.getTotal();
			},
			//获取当前为true的下标数组
			checkPro(e){
				this.value=e.detail.value;
			},
			//全选方法
			quanxuan(){
				this.checkAll=!this.checkAll;
				if(this.checkAll==true){
					for(var i=0;i<this.checks.length;i++){
						this.checks[i]=true;
					}
				}else{
					for(var i=0;i<this.checks.length;i++){
						this.checks[i]=false;
					}					
				}
				this.getTotal();
			},
			//计算总价			
			getTotal(){
				var total=0;
				for(var i=0;i<this.checks.length;i++){
					if(this.checks[i]==true){
						total=total+this.shoppingcar[i].number*this.shoppingcar[i].product.price;
					}
				}
				this.total=total;
			},
			//删除
			shanchu(index){
				//先移出数据库,先移出其他会导致该index下的其他数据已被删除,
				//则会导致index对应的数据不匹配
				uni.request({
					url:this.webUrl+"deleteShoppingCarById",
					data:{
						'id':this.shoppingcar[index].id
					},
					success: (res) => {
						if(res.data.code=="200"){
							uni.showToast({
								title:"移出购物车成功"
							})
						}
					}
				})
				//移出购物车下标
				this.shoppingcar.splice(index,1);
				//移出图片
				this.imgs.splice(index,1);
				//移出状态
				this.checks.splice(index,1);
				//考虑是否被删完的情况
				if(this.checks.length==0){
					this.checkAll=false;
				}else{
					//考虑刚好其他都选中,删除项删除前没有选中时,删除后,全选应该变为true
					var num=0;
					for(var i=0;i<this.checks.length;i++){
						if(this.checks[i]==false){
							break;
						}else{
							num++;
						}
					}
					if(num==this.checks.length){
						this.checkAll=true;
					}
				}
				this.getTotal();
			},
			//跳转到详情
			toDetail(index){
				uni.navigateTo({
					url:"/pages/liu/proDetail/proDetail?proId="+this.shoppingcar[index].proId+"&categoryId="+this.shoppingcar[index].product.categoryId
				})
			},
			//跳转到支付
			toShoppingCarPay(){
				//需要支付的商品集合,传过去用于显示
				var list=[];
				for(var i=0;i<this.imgs.length;i++){
					//根据是否被勾上对list添加数据
					if(this.checks[i]==true){
						list.push(this.shoppingcar[i])
					}
				}
				if(list.length==0){
					uni.showToast({
						title:"请选择商品"
					})
					return;
				}
				//利用缓存传过去
				uni.setStorage({
					key:"shoppingCarList",
					data:list
				})
				//传总价
				uni.setStorage({
					key:"total",
					data:this.total
				})
				//路由过去
				uni.navigateTo({
					url:"/pages/liu/payShoppingCar/payShoppingCar"
				})
			}
			
		}
	}
</script>
<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.product{
		float: left;
		width: 100%;
		height: 220rpx;
		background-color: white;
		margin-top: 20rpx;
		.checkBox{
			float: left;
			width: 80rpx;
			height: 220rpx;
			line-height: 220rpx;
			text-align: center;
		}
		.left{
			float: left;
			width: 220rpx;
			height: 220rpx;
			text-align: center;
			line-height: 220rpx;
			view{
				float:left;
				margin-top: 16rpx;
				margin-left: 16rpx;
				width: 180rpx;
				height: 180rpx;
				border: 2rpx solid rgb(220,220,220);
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.right{
			float: left;
			width: 450rpx;
			height: 220rpx;
			.proname{
				float: left;
				height: 65rpx;
				width: 450rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					color: rgb(148,102,102);
					font-size: 28rpx;
				}
			}
			.proprice{
				float: left;
				height: 65rpx;
				width: 450rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					font-size:30rpx;
					color: rgb(148,102,102);
				}
			}
			.pronumber{
				float: left;
				height: 65rpx;
				width: 450rpx;
				margin-top: 6rpx;
				.jiahao{
					width: 90rpx;
					height: 65rpx;
					float: left;
					text-align: center;
					color: rgb(148,102,102);
					text{
						font-size: 50rpx;
					}
				}
				.jianhao{
					float: left;
					width: 90rpx;
					height: 65rpx;
					text-align: center;
					color: rgb(148,102,102);
					text{
						font-size: 50rpx;
					}
				}
				.number{
					float: left;
					width: 148rpx;
					text-align: center;
					border: 1rpx solid rgb(220,220,220);
				}
				.shanchu{
					float: left;
					width: 90rpx;
					text-align: center;
					color: rgb(148,102,102);
					text{
						font-size: 50rpx;
					}
				}
			}
		}
	}
	//结算
	.jiesuan{
		float: left;
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		.allChoose{
			float: left;
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: rgb(148,102,102);
			font-size: 30rpx;
			text-align: center;
		}
		.heji{
			float: left;
			width: 310rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: rgb(148,102,102);
			font-size: 30rpx;
			text-align: right;
		}
		.bai{
			float: left;
			width: 40rpx;
			height: 100rpx;
			background-color: white;
		}
		.zhifu{
			float: left;
			width: 200rpx;
			height: 100rpx;
			background-color: rgb(148,102,102);
			line-height: 100rpx;
			color:white ;
			font-size: 40rpx;
			text-align: center;
		}
	}
	
	.liubai{
		float: left;
		width: 100%;
		height: 220rpx;
		background-color: grb(148,102,102);
	}
	
	//暂无评价,欢迎选购
	.zanwupingjia{
		width: 100%;
		height: 200rpx;
		float: left;
		line-height: 200rpx;
		text-align: center;
		margin-top: 200rpx;
		font-size: 80rpx;
		color: rgb(200,200,200);
		font-weight: bold;
	}
</style>
